<template>
    <div>
      <div class="index2">
        <div>
          <img src="../../assets/images/in_01.png" mode="widthFix" class="inbg" />
          <div class="intop">
            <!-- <view class="insearch">
              <image src="/images/search_06.png" mode="widthFix"></image>
              <input placeholder="搜索咨询文章"></input>
              <image src="/images/search_03.png" mode="widthFix"></image>
            </view> -->
            <div class="intopInfo">
              <h3>在线咨询</h3>
              <span>法律咨询</span>
              <div class="button" @click="toformconsult">问律师 ></div>
            </div>
          </div>
        </div>

        <div class="indexNav">
          <div @click="touserguide">
            <img src="../../assets/images/in_03.png" />
            <span>用户指南</span>
          </div>
          <div @click="toformconsult">
            <img src="../../assets/images/in_06.png" />
            <span>在线咨询</span>
          </div>
          <div>
            <img src="../../assets/images/in_08.png" />
            <span>找相似</span>
          </div>
        </div>
        <div class="intip">
          <div class="tipitem">
            <img src="../../assets/images/in_18.jpg" />
            <span>品质保障</span>
          </div>
          <div class="tipitem">
            <img src="../../assets/images/in_18.jpg" />
            <span>优质服务</span>
          </div>
          <div class="tipitem">
            <img src="../../assets/images/in_18.jpg" />
            <span>专业安全</span>
          </div>
          <div class="tipitem">
            <img src="../../assets/images/in_18.jpg" />
            <span>一对一服务</span>
          </div>
        </div>
        <div>
          <div class="page-section page-section-spacing swiper">
                  <img src="../../assets/images/in_22.jpg" mode="widthFix" />

          </div>
        </div>

        <div class="inNewsList">
          <div class="newsListTit">
            <h1>科普推荐<b></b></h1>
            <div @click="morenewsList">查看更多</div>
          </div>
          <div class="" v-for="item of Hotslist" :key="item.id">
            <div class="newsItem" @click="todetail(item.id)">
              <img :src="item.url" class="newImg" />
              <div class="newsTitle">
                <p>{{item.title}}</p>
                <div class="newsTag flex row justify-between">
                  <span>{{item.CateName}} {{item.addtime}} </span>
                  <span>点赞 {{item.dz}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="foot">
        <tabbarNav :tabbarindex="tabbarindex" />
      </div>
    </div>
</template>

<script>
import { gethotlist } from '@/api/index'
import tabbarNav from '@/components/nav'
export default {
  name: 'indexTwo',
  data () {
    return {
      tabbarindex: 0,
      Hotslist: [],
      isplus: localStorage.getItem('isplus')
    }
  },
  components: { tabbarNav },
  created () {
    this.getHotlist()
  },
  methods: {
    getHotlist () {
      gethotlist().then(res => {
        this.Hotslist = res.data
      })
    },
    toformconsult () {
      if (this.isplus == 1) {
        this.$router.push('/consultForm')
      } else {
        this.$router.push('/buy')
      }
    },
    todetail (e) {
      this.$router.push({name: 'newsDetail', params: {id: e}})
    },
    morenewsList () {
      this.$router.push('newspage')
    },
    touserguide () {
      this.$router.push('userguide')
    }
  }
}
</script>

<style lang="" scoped>
  .index2{
    position: relative;
  }
  .intop{
    position: absolute;
    left: 0px;
    width: 100%;
    top: 0px
  }
  .insearch{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    width: 85%;
    border-radius: .10rem;
    margin: .3rem auto;
    padding: .1rem;
    margin-top: 1rem
  }
  .insearch image{
    width: .4rem;
    height: .4rem
  }
  .insearch input{
    flex: 1;
    padding: 0 .1rem
  }
  .inbg{
    width: 100%
  }
  .intopInfo{
    color: #fff;
    padding: .7rem .8rem;
    text-align: left;
    margin-top: 1.3rem
  }
  .intopInfo h3{
    font-size: .5rem;
    font-weight: bold
  }
  .intopInfo span{
    font-size: .4rem;
    display: block;
    margin: .5rem 0;
  }
  .intopInfo .button{
    border-radius: .50rem;
    display: block;
    margin-left: 0px;
    margin-right: 0px;
    background: #fff;
    color: #39afff;
    width: 2rem;
    text-align: center;
    padding: .10rem 0;
    margin-top: .20rem
  }
  .indexNav{
    background: #fff;
    border-top-left-radius: .20rem;
    border-top-right-radius: .20rem;
    width: 90%;
    margin: 0 auto;
    margin-top: -1rem;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: .40rem 0;
    border-bottom: 1px solid #dfdfdd
  }
  .indexNav img{
    width: 1rem;
    height: 1rem;
    display: block;
    margin-bottom: .3rem
  }
  .intip{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: .22rem auto;
  }
  .intip img{
    width: .27rem;
    height: .25rem;
    margin-right: .1rem
  }
  .intip span{
    font-size: .22rem
  }
  .tipitem{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  swiper{
    height: 2.5rem
  }
  .swiper{
    width: 90%;
    margin: .5rem auto;
  }
  .swiper img{
    width: 100%
  }
  .inNewsList{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .newsListTit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .newsListTit h1{
    font-size: .3rem;
  }
  .newsListTit text{
    color: #ccc;
  }
  .newsItem{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding: .3rem 0;
    width: 100%;
    border-bottom: 1px solid #efefef;
  }
  .newImg{
    width: 1.8rem;
    height: 1.6rem;
    margin-right: .20rem;
    border-radius: 0px;
    background: #efefef;
    display: block;
  }
  .newsTag{
    color: #999;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

  }
  .newsTitle{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    height: 1.6rem;
    flex: 1;
  }
</style>
